const path = require('path'); //node.js 核心模块 ， 专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin'); // 专门用来检查js代码的

module.exports = {
  // 入口
  entry: "./src/main.js",   //相对路径
  // 输出
  output: {
    // 所有的文件的输出路径
    // __dirname 表示当前文件所在目录的绝对路径
    path: path.resolve(__dirname, 'dist'), //绝对路径
    // 入口文件打包输出文件名
    filename: "static/js/main.js",
    // 在每次重新打包时，先清空dist文件夹
    // 原理：在打包前，将整个 path 整个目录内容清空，再进行打包
    clean: true,
  },
  // 加载器
  module: {
    rules: [
      // loader详细配置规则
      {
        test: /\.css$/,   //检查.css结尾的文件
        use: [  //执行顺序从右到左（从下到上）
          "style-loader", // 2.再使用style-loader将js模块中的样式通过style标签插入到html中
          "css-loader"  // 1.先使用css-loader将css文件编译成js模块
        ],
      },
      {
        test: /\.less$/,   //检查.css结尾的文件
        use: [  //执行顺序从右到左（从下到上）  //use 可以使用多个loader，但是loader只能使用一个loader
          "style-loader", // 2.再使用style-loader将js模块中的样式通过style标签插入到html中
          "css-loader", // 1.先使用css-loader将css文件编译成js模块
          "sass-loader"  // 使用sass-loader将less文件编译成css文件
        ],
      },
      {
        test: /\.s[ac]ss$/,   //检查.css结尾的文件
        use: [  //执行顺序从右到左（从下到上）  //use 可以使用多个loader，但是loader只能使用一个loader
          "style-loader", // 2.再使用style-loader将js模块中的样式通过style标签插入到html中
          "css-loader", // 1.先使用css-loader将css文件编译成js模块
          "sass-loader"  // 使用sass-loader将less文件编译成css文件
        ],
      },
      {
        test: /\.styl$/,   //检查.css结尾的文件
        use: [  //执行顺序从右到左（从下到上）  //use 可以使用多个loader，但是loader只能使用一个loader
          "style-loader", // 2.再使用style-loader将js模块中的样式通过style标签插入到html中
          "css-loader", // 1.先使用css-loader将css文件编译成js模块
          "stylus-loader"
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            // 优点：减少请求数量   缺点：体积会变更大
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 输出图片的名字
          filename: "static/images/[name]_[hash:8][ext][query]" // [name]：文件名 [hash:8]：文件hash值的前8位 [ext]：文件扩展名 [query]：文件参数
        }
      },
      {
        // 处理其他资源，在后面加文件后缀名就能统一进行处理
        test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
        type: "asset/resource",   //这个resource这个设置是不转base64的，直接输出文件
        generator: {
          filename: "static/media/[name]_[hash:8][ext][query]" // [name]：文件名 [hash:8]：文件hash值的前8位 [ext]：文件扩展名 [query]：文件参数
        }
      },
    ],
  },
  // 插件
  plugins: [
    // 插件配置
    new ESLintPlugin({
      // 指定检查的文件
      context: path.resolve(__dirname, "src"), // 指定检查的文件
    }),
  ],
  // 模式
  mode: 'development', //开发模式
}